<template>
  <!-- 信用表  -->
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="身份证号" prop="idcard">
        <el-input
          v-model="queryParams.idcard"
          placeholder="请输入身份证号"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="userList">


      <el-table-column label="患者身份证号" align="center" key="idcard" prop="idcard"/>
      <el-table-column label="记录日期" align="center" key="queryTime" prop="queryTime"/>
      <el-table-column label="查询人" align="center" key="queriedBy" prop="queriedBy"/>

      <el-table-column label="医保信息评分" align="center" key="insuranceScore" prop="insuranceScore"/>
      <el-table-column label="患者身份评分" align="center" key="identityScore" prop="identityScore"/>
      <el-table-column label="就诊记录评分" align="center" key="recordScore" prop="recordScore"/>
      <el-table-column label="医护人员主观评分" align="center" key="staffScore" prop="staffScore"/>
      <el-table-column label="黑名单评分" align="center" key="blacklistScore" prop="blacklistScore"/>
      <el-table-column label="最终信用评分" align="center" key="finalScore" prop="finalScore"/>

      <el-table-column
        label="操作"
        align="center"
        width="220"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="searchScore(scope.row)"

          >详细
          </el-button>

        </template>
      </el-table-column>


    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 信用查询对话框 -->
    <el-dialog title="信用查询" :visible.sync="scoreInfo.open" width="80%" append-to-body>
      <div class="creditBox">
        <div class="leftBox">
          <div class="chart-wrapper">
            <pie-chart ref="pieEl"/>
          </div>
          <div class="bigNum"><p>{{ userInfo.finalScore }}</p>最终信用评分</div>
        </div>
        <div class="rightBox">
          <div class="panel" style="height: 150px">
            <div class="headerBox"><img src="../../../assets/images/icon1.png"/></div>
            <div class="name">
              <div class="line" style="font-size: 18px">患者身份证号：{{ userInfo.idcard }}</div>
              <div class="line">
                <p>查询人：{{ userInfo.queriedBy }}</p>
                <p>查询时间：{{ userInfo.queryTime }}</p>
              </div>
            </div>
          </div>
          <div class="panelTable">
            <el-table :data="userInfo.creditDetails" height="310">
              <el-table-column label="明细类型" align="center" key="detailType" prop="detailType"/>
              <el-table-column label="明细描述" align="center" key="detailDescription" prop="detailDescription"/>
              <el-table-column label="明细评分" width="150" align="center" key="detailScore" prop="detailScore"/>
            </el-table>
          </div>

        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { creditList } from '@/api/credit/creditTable'
import PieChart from './PieChart'
import { searchCredit } from '@/api/credit/creditTable'

export default {
  components: { PieChart },
  name: 'patient',
  dicts: [],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        idcard: undefined
      },
      scoreInfo: { open: false },
      userInfo: {
        'idcard': null,
        'queryTime': null,
        'queriedBy': null,
        'insuranceScore': null,
        'identityScore': null,
        'recordScore': null,
        'staffScore': null,
        'blacklistScore': null,
        'finalScore': null,
        'creditDetails': []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true
      creditList(this.queryParams).then(response => {
          this.userList = response.rows
          this.total = response.total
          this.loading = false
        }
      )
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置搜索条件按钮操作 */
    resetQuery() {

      this.resetForm('queryForm')
      this.handleQuery()

    },
    searchScore(row) {

      console.log('row', row)
      this.loading = true
      //'12348'
      searchCredit({ idcard: row.idcard }).then(response => {
          this.loading = false
          if (!response.data) {
            this.$modal.msg(response.msg)
            return
          }
          this.scoreInfo.open = true
          this.userInfo = {
            'idcard': response.data.idcard,
            'queryTime': response.data.queryTime,
            'queriedBy': response.data.queriedBy,
            'insuranceScore': response.data.insuranceScore ? response.data.insuranceScore : 0,//医保信息评分
            'identityScore': response.data.identityScore ? response.data.identityScore : 0,//患者身份评分
            'recordScore': response.data.recordScore ? response.data.recordScore : 0,//就诊记录评分
            'staffScore': response.data.staffScore ? response.data.staffScore : 0,//医护人员主观评分
            'blacklistScore': response.data.blacklistScore ? response.data.blacklistScore : 0,//黑名单评分
            'finalScore': response.data.finalScore,
            'creditDetails': response.data.creditDetails

          }
          setTimeout(() => {
            this.$refs.pieEl.initChart([
                { value: this.userInfo.insuranceScore, name: '医保信息评分' },
                { value: this.userInfo.identityScore, name: '患者身份评分' },
                { value: this.userInfo.recordScore, name: '就诊记录评分' },
                { value: this.userInfo.staffScore, name: '医护人员主观评分' },
                { value: this.userInfo.blacklistScore, name: '黑名单评分' }
              ]
            )
          }, 200)

          this.loading = false
        }
      )
    }

  }
}
</script>
<style scoped>

.creditBox {
  display: flex;
  justify-content: space-around; /* 水平方向间隔分布 */
  gap: 20px; /* 设置间隔为20px */
  height: 480px;
  padding-bottom: 50px;
  box-sizing: content-box;
}

.leftBox {
  height: 100%;
  flex: 3;
  background: #e7effc;
  border: solid 1px #afceff;
  /*box-shadow: 0 0 5px #eee;*/
}

.rightBox {
  height: 100%;
  flex: 4;

  /*box-shadow: 0 0 5px #eee;*/
}

.chart-wrapper {
  padding: 15px 15px 0;
  margin-bottom: 20px;
}

.bigNum {
  font-size: 18px;
  text-align: center;
  color: #333;
  margin-top: -20px;
}

.bigNum p {
  font-weight: 600;
  font-size: 52px;
  color: #5c78ff;
}

.panel {
  position: relative;
  background: #e7effc;
  border: solid 1px #afceff;
  width: 100%;
}

.headerBox {
  width: 110px;
  height: 110px;
  margin: 20px 0 0 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: solid 1px #afceff;
  padding: 10px;
  box-sizing: border-box;
}

.headerBox img {
  width: 100%;
  height: 100%;
}

.name {
  position: absolute;
  top: 30px;
  left: 160px;
  width: calc(100% - 200px);
}

.line {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 16px;
  line-height: 40px;
  color: #333;

}


.panelTable {
  height: 310px;
  margin-top: 18px;
  border: solid 1px #afceff;

}

</style>
